<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>畅销书排行榜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .book{
            width:500px;
	        background-color:#f3f4df;
        }
        h2{
            color:#fff;
            text-indent: 10px;
            background-color: green;
            background-image: url(css/bang.gif);
            background-repeat: no-repeat;
            background-position: 135px;
            font-size: 16px;
            padding: 10px;
            position: right 10px;
            font-size: 20px;
        }
        .book ul{
            list-style: none;
            font-size: 14px;
            
        }
        .book ul li{
            text-indent: 2em;
            background-repeat: no-repeat;
            list-style: none;  
            line-height: 28px;
            list-style-type: none;
        }
        .book ul li a{
            line-height: 35px;
            letter-spacing: 2px;
            text-decoration: none;
        }
         .book ul li a:hover{
            text-decoration: underline;
        }
        ul li:nth-of-type(1){background: url(css/book_no01.gif) 0 center no-repeat;}
        ul li:nth-of-type(2){background: url(css/book_no02.gif) 0 center no-repeat;}
        ul li:nth-of-type(3){background: url(css/book_no03.gif) 0 center no-repeat;}
        ul li:nth-of-type(4){background: url(css/book_no04.gif) 4px center no-repeat;}
        ul li:nth-of-type(5){background: url(css/book_no05.gif) 4px center no-repeat;}
        ul li:nth-of-type(6){background: url(css/book_no06.gif) 4px center no-repeat;}
        ul li:nth-of-type(7){background: url(css/book_no07.gif) 4px center no-repeat;}
        ul li:nth-of-type(8){background: url(css/book_no08.gif) 4px center no-repeat;}
        ul li:nth-of-type(9){background: url(css/book_no09.gif) 4px center no-repeat;}
        ul li:nth-of-type(10){background: url(css/book_no10.gif) 4px center no-repeat;}
    </style>
</head>
<body>
    <div class="book">
        <h2 class="title">畅销书排行</h2>
        <ul>
          <li ><a href="#" target=_blank>不抱怨的世界(畅...</a></li>
          <li ><a href="#" target=_blank>遇见未知的自己...</a></li>
          <li ><a href="#" target=_blank>活法（季羡林、...</a></li>
          <li ><a href="#" target=_blank>高效能人士的七个习惯</a></li>
          <li ><a href="#" target=_blank>被迫强大（北外女生香奈儿...</a></li>
          <li ><a href="#" target=_blank>遇见心想事成的自己（《遇...</a></li>
          <li ><a href="#" target=_blank>世界上最伟大的推销员（插...</a></li>
          <li ><a href="#" target=_blank>我的成功可以复制（唐骏亲...</a></li>
          <li ><a href="#" target=_blank>少有人走的路：心智成熟的...</a></li>
          <li ><a href="#" target=_blank>活出全新的自己――唤醒...</a></li>
        </ul>
    </div>
</body>
</html>